<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">

    <title>在线考试系统</title>

    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="horizontal-menu-page">

<section>
    <!--头部开始 commonhead传入参数判断进入的页面高亮显示-->
    <nav th:fragment="commonhead(active)" class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li th:class="${active=='index.html'?'active':''}"><a th:href="@{/user/index}">首页</a></li>
                    <li th:class="${active=='questionList.html'?'active':''}"><a th:href="@{/user/questionList}">问题</a></li>
<!--                    <li th:class="${active=='paperTest.html'?'active':''}"><a th:href="@{/user/paperTest}">模拟考试</a></li>-->
                    <li th:class="${active=='paper.html'?'active':''}"><a th:href="@{/user/paper}">考试</a></li>
                    <li ><a href="#"></a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" th:text="${userName}"><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-toggle="modal" href="#updatePassword"><i class="fa fa-cog"></i>  修改密码</a></li>
                            <li><a th:href="@{/user/logout}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--头部结束-->

    <!--正文开始-->
    <div class="wrapper">
        正文
    </div>
    <!--正文结束-->

    <!--底部开始-->
    <footer class="sticky-footer">
        平顶山学院提供技术支持
    </footer>
    <!--底部结束-->

</section>

<!--   修改密码modal框开始-->
<div th:fragment="commonupdatePwd">
    <div data-backdrop="static" data-keyboard="false"  aria-labelledby="updatePassword" role="dialog" tabindex="-1" id="updatePassword" class="modal fade text-center">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改密码</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <div aria-hidden="true">&times;</div>
                    </button>
                </div>
                <div class="modal-body">
                    <br/>
                    <div class="item form-group col-md-12  tip"   >
                        <div class="col-md-offset-3 col-md-3" style="color:red;display:none;" id="tip"></div>
                    </div>

                    <div class="item form-group">
                        <label for="oldPwd" >输入原密码</label>
                        <input id="oldPwd" type="password" name="oldPwd" required="required">
                    </div>
                    <div class="item form-group">
                        <label for="newPwd" >输入新密码</label>
                        <input id="newPwd" type="password" name="newPwd"  required="required">
                    </div>
                    <div class="item form-group">
                        <label for="newPwd2">确认新密码</label>
                        <input id="newPwd2" type="password" name="newPwd2" required="required">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" id="pwd_btn" name="dosubmit" class="btn btn-secondary" >确认修改</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!--   修改密码modal框结束-->


<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<script src="js/scripts.js"></script>


<script th:fragment="commonPaperJs">
    function toFirst(pId) {
        console.log(pId)
        $.ajax({
            // 请求路径
            url: "/user/paper/paperDetail",
            //请求类型
            method: "POST",
            //data表示发送的数据
            data: JSON.stringify({
                pid:pId
            }), //定义发送请求的数据格式为JSON字符串
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if (data.code == 200){
                    //初始化
                    $("#s_radio").addClass("hidden")
                    $("#s_checkBox").addClass("hidden")
                    $("#lastQ").removeClass("hidden")
                    $("#nextQ").removeClass("hidden")

                    $("#num").attr("value",data.num)
                    $("#singleNum").attr("value",data.singleNum)
                    $("#moreNum").attr("value",data.moreNum)
                    $("#questionType").attr("value",data.questionType)
                    $("#size").attr("value",data.questionObject.questionItemObjects.length)
                    $("#checkAnswer").attr("value",data.checked)
                    $("#status").attr("value",data.status)    // 是否已经做过
                    $("#endTime").attr("value",data.endTime)
                    $('#title').attr("text",data.num+'.'+data.questionObject.titleContent)
                        .html(data.num+'.'+data.questionObject.titleContent)

                    //设置下一题上一题id
                    $('#nextQ').attr("value",data.num+1)
                    $('#lastQ').attr("value",data.num-1)

                    var singleNum = $("#singleNum").val()
                    var pId = $("#pid").val()
                    var moreNum = $("#moreNum").val()

                    var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
                    for (var i = 0; i<arr.length;i++){
                        $("#c_"+arr[i]+"").addClass("hidden")
                        $("#r_"+arr[i]+"").addClass("hidden")
                    }



                    var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
                    var len = $('#size').val()
                    var questionType = $("#questionType").val()
                    var num = $('#num').val()
                    if(questionType == 1){ // 单选题
                        $("#s_radio").removeClass("hidden");
                        for (var i = 0; i < len; i++) {
                            //移除隐藏状态、
                            $("#r_" + arr[i] + "").removeClass("hidden")
                        }
                    }
                    if (questionType == 2){   // 多选题
                        $("#s_checkBox").removeClass("hidden");
                        for (var j = 0; j < len; j++) {
                            //移除隐藏状态、
                            $("#c_" + arr[j] + "").removeClass("hidden")
                        }
                    }
                    // 下一题 条件显示
                    if(num == parseInt(singleNum) + parseInt(moreNum)){
                        $("#nextQ").addClass("hidden")
                    }

                    // 上一题 条件显示
                    if(num == 1){
                        $("#lastQ").addClass("hidden")
                    }

                    // 调用计时函数
                    var endDateStr = $("#endTime").val()
                    TimeDown("countTime",endDateStr)

                    // 添加按钮
                    addButton(singleNum,moreNum)
                    // 题目导航框按钮回显
                    document.getElementById("btn_"+num).style.backgroundColor="#DCDCDC"


                    // 回显
                    var status = $("#status").val()
                    var checked = $("#checkAnswer").val()

                    if (status == 1){
                        if (questionType == 1){
                            // 单选框数据回显
                            $(':radio[name=\'r_choice\'][value=\'' + checked+ '\']').prop('checked', 'checked');
                        }else if (questionType == 2){
                            //获得所要回显的值
                            var checkeds = $("#checkAnswer").val();
                            //拆分为字符串数组
                            var checkArray =checkeds.split("");
                            //获得所有的复选框对象
                            var checkBoxAll = $("input[name='c_choice']");

                            $.each(checkArray , function (index , expressValue) {
                                checkBoxAll.each(function () {
                                    if ($(this).val() == expressValue){
                                        $(this).attr("checked",true)
                                    }
                                })
                            })
                        }

                    }
                } else{
                    alert("系统出现问题，请重试！")
                }
            }
        })
    }

    // 考试倒计时
    function TimeDown(id , endDateStr) {
        console.log(endDateStr)
        //结束时间
        var endDate = new Date(endDateStr);
        //当前时间
        var nowDate = new Date();
        //相差的总秒数
        var totalSeconds = parseInt((endDate - nowDate) / 1000);
        //取模（余数）
        var modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        var hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        var minutes = Math.floor(modulo / 60);
        //秒
        var seconds = modulo % 60;
        //输出到页面
        //document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        document.getElementById(id).innerHTML = "距离结束还有"+ hours+ "小时"+ minutes + "分钟"+ seconds + "秒";
        if( hours+minutes+seconds <= 0){
            alert("时间已到！");
            toFinish();
        }else{
            //延迟一秒执行自己
            setTimeout(function () {
                TimeDown(id, endDateStr);
            }, 1000)
        }

    }

</script>

</body>
</html>
